'use client'
import Image from 'next/image'
import { ContactForm, Headquarters } from './_components'
import { ReactLenis } from 'lenis/react'

export default function Contact() {
  
  return (
    <ReactLenis root>
      <main>
        <section className='h-auto md:h-[400px] xl:h-[550px] 3xl:h-[750px] bg-[url("/images/contact-banner.jpg")] bg-cover bg-center overflow-hidden'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] pb-[10px] md:pb-0 mx-auto h-full block md:flex items-center justify-between'>
            <div className='pt-[20px] md:pt-0'>
              <h1 className='text-[26px] text-center md:text-left lg:text-[40px] 3xl:text-[48px] text-white font-bold leading-[26px] lg:leading-[40px] 3xl:leading-[48px] mb-[10px] 3xl:mb-[32px]'>联系我们</h1>
              <div className='mb-[20px] mx-auto md:mx-0 w-[200px] md:w-[300px] lg:w-[470px] xl:w-[600px] 3xl:w-[743px] h-[34px] md:h-[50px] lg:h-[80px] xl:h-[100px] 3xl:h-[125px] relative'>
                <Image src="/images/contact-banner-text.png" alt="logo" fill className='object-contain' />
              </div>
            </div>
            <div className='bg-white rounded-lg md:rounded-r-none md:rounded-bl-none lg:rounded-tl-[30px] xl:rounded-tl-[40px] 3xl:rounded-tl-[60px] block md:flex items-center pt-[15px] md:p-[30px] lg:pt-[50px] xl:pt-[55px] 3xl:pt-[74px] pb-[15px] pr-[15px] md:pr-0 md:pb-[30px] lg:pb-[60px] xl:pb-[70px] 3xl:pb-[90px] pl-[15px] lg:pl-[50px] 2xl:pl-[55px] 3xl:pl-[75px] relative before:hidden md:before:block before:absolute before:left-[100%] before:top-0 before:bottom-0 before:w-[100vw] before:bg-white'>
              <div className='w-auto md:w-[300px] xl:w-[350px] 3xl:w-[470px] mr-0 md:mr-[50px] mb-[10px] md:mb-0'>
                <p className='text-base md:text-[18px] xl:text-[26px] 3xl:text-[30px] text-[#0C4E99] font-bold leading-[18px] xl:leading-[26px] 3xl:leading-[30px] mb-[15px] md:mb-[30px] 2xl:mb-[45px] 3xl:mb-[65px]'>联系方式</p>
                <p className='text-xs md:text-sm lg:text-sm xl:text-base 3xl:text-[18px] 3xl:leading-[28px] text-[#999]'>天骥教育集团由清华、北大、复旦、交大等名校校友创立，是业内首家汇集清北复交全职名师的大学多元升学教育平台。我们致力于为广大大学生提供系统有效的保研、留学、考研升学规划，以及绩点、科研、竞赛等多维能力提升服务，引领大学生圆梦名校。</p>
              </div>
              <div className='mt-auto flex flex-row md:flex-col items-end'>
                <p className='text-xs md:text-sm 3xl:text-[16px] 3xl:leading-[16px] text-[#666] mb-0 xl:mb-[10px] 3xl:mb-[16px]'>全国在线客服</p>
                <p className='text-sm md:text-[20px] xl:text-[26px] 3xl:text-[32px] leading-[16px] md:leading-[20px] xl:leading-[26px] 3xl:leading-[32px] font-bold bg-gradient-to-r from-[#80D0FF] to-[#0C4E99] bg-clip-text text-transparent mb-0 md:mb-[23px]'>400-968-1808</p>
                <p className='flex items-center mb-0 xl:mb-[10px] 3xl:mb-[16px] text-xs md:text-sm xl:text-base 3xl:text-[18px]'>工作时间<i className='block size-[16px] xl:size-[20px] 3xl:size-[24px] ml-[5px] bg-[url("/images/contact-time-icon.png")] bg-no-repeat bg-contain'></i></p>
                <p className='text-[#11539D] text-sm md:text-base xl:text-base 3xl:text-[18px] leading-[16px] md:leading-[18px] font-bold'>9:00-21:00(周一至周日)</p>
              </div>
            </div>
          </div>
        </section>

        <section className='bg-white'>
          <div className='w-[1650px] max-1650:w-auto mx-auto py-[10px] md:py-[100px] px-[10px] lg:px-[20px]'>
            <Headquarters />
          </div>
        </section>

        <section className='bg-[#F7F6F5]'>
          <div className='w-[1650px] max-1650:w-auto mx-auto py-[20px] md:py-[80px] px-[10px] lg:px-[20px] block md:flex items-start justify-between'>
            <div className='flex md:block justify-between md:justify-start'>
              <div>
                <h2 className='text-base md:text-[48px] md:leading-[48px] font-bold text-[#333] mb-[20px] md:mb-[50px]'>在线留言</h2>
                <p className='text-xs md:text-[30px] md:leading-[30px] text-[#333] mb-[5px] md:mb-[10px]'>欢迎留下您的信息</p>
                <p className='text-xs md:text-[30px] md:leading-[30px] text-[#333] mb-[5px] md:mb-[10px]'>我们收到后</p>
                <p className='text-xs md:text-[30px] md:leading-[30px] text-[#333] mb-[5px] md:mb-[45px]'>立即与您联系</p>
                <i className='block bg-[#333] w-[38px] h-[2px] mb-[40px]'></i>
                <p className='text-[#333] text-[12px] leading-[14px] mb-[88px] flex-col justify-start uppercase hidden md:flex'>
                  <span>Welcome to leave your message</span>
                  <span>We will be in 3 business days</span>
                  <span>Contact you</span>
                </p>
              </div>
              <div className='w-[80px] md:w-[129px]'>
                <div className='size-[80px] md:size-[129px] relative mb-[8px] md:mb-[14px]'>
                  <Image alt='' src='/images/contact-qrcode.png' fill className='object-contain' />
                </div>
                <p className='text-center text-xs md:text-base text-[#333] leading-[16px]'>市场部老师</p>
              </div>
            </div>
            <ContactForm />
          </div>
        </section>
      </main>
    </ReactLenis>
  )
}
